<script setup>
import { ref } from 'vue'
const line = ref(null)
const check = (e) => {
    // console.log(e.target.offsetLeft);
    line.value.style.transform = `translateX(${e.target.offsetLeft - 400}px)`
}
</script>
<template>
    <div class="total">
        <div class="header">
            <router-link to="/">
                <img class="logo" src="/image/logo.png" alt="">
            </router-link>
            <ul class="main">
                <li><router-link to="/grade" class="sp" active-class="active" @click="check">学习课程</router-link>
                </li>
                <li><router-link to="/another2" active-class="active" @click="check">证书认证查询</router-link></li>
                <div class="line" ref="line"></div>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>
<style scoped lang="scss">
.total {
    width: 100%;
    // background-color: #FCECDD;
}

.header {
    z-index: 999;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 80px;
    background: #FFFFFF;
    list-style: none;

    .sp {
        padding-left: 16px;
    }

    .logo {
        width: 236px;
        height: 40px;
        margin-left: 40px;
        margin-right: 124px;
    }

    ul li {
        display: inline;
        width: 96px;
        height: 22px;
        margin-right: 80px;
    }

    a {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 500;
        color: black;
        line-height: 22px;
    }

    a:hover {
        font-weight: 600;
        color: #FF6701;
    }

    .active {
        font-weight: 600;
        color: #FF6701;
    }

    .line {
        position: absolute;
        top: 60px;
        left: 432px;
        width: 32px;
        height: 4px;
        background-color: #FF6701;
        transition: all 0.3s linear;
        transform: translate(x, y);
    }

}
</style>